<template>
  <!-- 药材质量Form -->
  <div>
    <el-form :model="mdValueform">
      <el-form-item label="性状：" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          :readonly="true"
          v-model="mdValueform.tMedicinalSharp"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="性状图片：" :label-width="formLabelWidth">
        <el-image
          v-if="mdValueform.tMedicinalSharpImgPath != ''"
          style="margin-left: 20px; width: 400px;height: 170px"
          :src="BASEURL + mdValueform.tMedicinalSharpImgPath"
          :fit="fit"
        ></el-image>
        <span v-else>暂无图片</span>
      </el-form-item>
      <el-form-item label="鉴别：" :label-width="formLabelWidth">
        <el-input
          :readonly="true"
          v-model="mdValueform.tMedicinalIdentify"
          type="textarea"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="鉴别图片：" :label-width="formLabelWidth">
        <el-image
          v-if="mdValueform.tMedicinalIdentifyImgPath != ''"
          style="margin-left: 20px; width: 500px;height: 200px" 
          :src="BASEURL + mdValueform.tMedicinalIdentifyImgPath"
          :fit="fit"
        ></el-image>
        <span v-else>暂无图片</span>
      </el-form-item>
      <el-form-item label="浸出物：" :label-width="formLabelWidth">
        <el-input :readonly="true" v-model="mdValueform.tMedicinalExtractum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="含量测定：" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          :readonly="true"
          v-model="mdValueform.tMedicinalContentsCheck"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="特征图谱或指纹图谱：" :label-width="formLabelWidth">
        <el-image
          v-if="mdValueform.tMedicinalFeatureImgPath != ''"
          style="margin-left: 20px; width: 500px;height: 200px"
          :src="BASEURL + mdValueform.tMedicinalFeatureImgPath"
          :fit="fit"
        ></el-image>
        <span v-else>暂无图片</span>
      </el-form-item>
      <el-form-item label="图谱说明：" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          :readonly="true"
          v-model="mdValueform.tMedicinalFeatureImgInfo"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="总体评价：" :label-width="formLabelWidth">
        <el-select disabled v-model="mdValueform.tMedicinalQuality" placeholder="评价" :readonly="true">
          <el-option label="优" value="ample"></el-option>
          <el-option label="良" value="nice"></el-option>
          <el-option label="合格" value="qualified"></el-option>
          <el-option label="不合格" value="unqualified"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const BASEURL = "https://image.zysuyuan.cn:8031/";

export default {
  name: "mdvalue-form",
  props: {
    mdvalueformData: {
      type: Object
    }
  },
  data() {
    return {
      formLabelWidth: "120px",
      fit: "contain",
      mdValueform: {
        tMedicinalSharp: "", // 性状
        tMedicinalSharpImgPath: "", // 性状图片
        tMedicinalIdentify: "", // 鉴别
        tMedicinalIdentifyImgPath: "", // 鉴别图片
        tMedicinalExtractum: "", // 浸出物
        tMedicinalContentsCheck: "", // 含量测定
        tMedicinalFeatureImgPath: "", // 特征图谱或指纹图谱
        tMedicinalFeatureImgInfo: "", // 图谱说明
        tMedicinalQuality: "" // 总评
      },
      BASEURL
    };
  },

  watch: {
    mdvalueformData: {
      immediate: true,
      handler(val) {
        this.mdValueform = val;
      }
    }
  }
};
</script>